<!DOCTYPE html>
<html lang="en">


<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    user-scalable=0">
    <title>进制转换器(涵子易)</title>
    <script>
        //rem布局插件
        (function flexible(window, document) {
            var docEl = document.documentElement
            var dpr = window.devicePixelRatio || 1

            // adjust body font size
            function setBodyFontSize() {
                if (document.body) {
                    document.body.style.fontSize = (12 * dpr) + 'px'
                }
                else {
                    document.addEventListener('DOMContentLoaded', setBodyFontSize)
                }
            }
            setBodyFontSize();

            // set 1rem = viewWidth / 10
            function setRemUnit() {
                var rem = docEl.clientWidth / 20
                docEl.style.fontSize = rem + 'px'
            }

            setRemUnit()

            // reset rem unit on page resize
            window.addEventListener('resize', setRemUnit)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setRemUnit()
                }
            })

            // detect 0.5px supports
            if (dpr >= 2) {
                var fakeBody = document.createElement('body')
                var testElement = document.createElement('div')
                testElement.style.border = '.5px solid transparent'
                fakeBody.appendChild(testElement)
                docEl.appendChild(fakeBody)
                if (testElement.offsetHeight === 1) {
                    docEl.classList.add('hairlines')
                }
                docEl.removeChild(fakeBody)
            }
        }(window, document))
    </script>

    <style>
        @media screen and (max-width:375px) {
            html {
                font-size: 18.75px !important;
            }
        }

        @media screen and (min-width:1080px) {
            html {
                font-size: 54px !important;
            }
        }


        body {
            min-width: 320px;
            max-width: 1080px;
            margin: 0 auto;
            color: #666;
            line-height: 1.5;
            font-family: -apple-system, Helvetica, sans-serif;
            background-color: #fff;
            box-sizing: border-box;

        }

        button,
        input {
            /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            /* 默认有灰色边框我们需要手动去掉 */
            border: 1px solid #ccc;
            outline: none;
            box-sizing: border-box;
        }

        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        ul li {

            list-style: none;
        }

        /*我们的css样式*/
        h1 {
            text-align: center;
            font-size: 1.5rem;
        }

        .comput {
            display: flex;
            flex-wrap: wrap;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);

            width: 15rem;
            height: 10vw;
        }

        .comput select {
            flex: 3;
        }

        .comput input {
            flex: 4;
        }

        .comput button {
            flex: 3;
            height: 10vw;
            color: #fff;
            background-color: #f47c3c;
        }

        .result {
            display: flex;
            margin-top: 20vw;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            width: 15rem;
            height: 10vw;
        }

        .result p {
            flex: 30%;
            font-size: 1rem;
            text-align: center;
            line-height: 10vw;
        }

        .result select {
            flex: 40%;
        }

        .famliy {
            font-size: 1rem;
            text-align: center;
            margin-top: 40vw;
        }
    </style>


</head>

<body>
    <h1>涵子易的进制转换</h1>
    <!--计算部分-->
    <div class="comput">
        <select name="" id="">
            <option value="2">二进制</option>
            <option value="8">八进制</option>
            <option value="10">十进制</option>
            <option value="16">十六进制</option>
        </select>
        <input type="text">
        <button>转换</button>
    </div>


    <!--结果部分-->
    <div class="result">
        <p>转换为</p>
        <select name="" id="">
            <option value="2">二进制</option>
            <option value="8">八进制</option>
            <option value="10">十进制</option>
            <option value="16">十六进制</option>
        </select>
        <p>结果为:</p>
    </div>
    <div class="famliy">

    </div>

    <script>


        document.querySelector(".comput button").addEventListener("click", () => {
            //要计算的进制
            let comput = document.querySelector('.comput select').value;
            comput = parseFloat(comput);

            //要转换的进制
            let result = document.querySelector('.result select').value;
            result = parseFloat(result);
            //输入的数字
            let number = document.querySelector('.comput input').value;

            //判断数字是否合法
            for (i = 0; i < number.length; i++) {
                if (number[i] >= comput) {
                    alert("请您输入正确的" + comput + "进制数字");
                    return;
                }
            }

            let flag = parseInt(number, comput);
            if (flag.toString() == 'NaN') {
                alert("请您输入正确的进制数字");
                return;
            }






            //判断是否小数
            if (document.querySelector('.comput input').value.indexOf('.') !== -1) {
                arr = [];
                for (i = 0; i < number.length; i++) {
                    arr[i] = number[i];
                }
                let num = arr.indexOf('.');
                numberarr = arr.filter((items, index) => items !== '.');

                integerarr = [];//整数数组
                decimalarr = [];//小数数组
                let j = 0;//小数数组计数器
                let integersum = 0;//整数求和
                let decimalsum = 0;//小数部分

                //整数幂次部分
                //构建整数数组
                for (i = 0; i < num; i++) {
                    integerarr[i] = numberarr[i];
                }
                let len = integerarr.length;
                //计算整数部分进制
                for (i = 0; i < num; i++) {
                    len--;
                    const c = parseInt(integerarr[i], comput);
                    integersum += c * comput ** len;
                }


                //小数数幂次部分
                //构建小数数数组
                for (i = num; i < numberarr.length; i++) {
                    decimalarr[j] = numberarr[i];
                    j++;
                }
                //计算小数数部分进制
                for (i = 0; i < decimalarr.length; i++) {
                    len--;
                    const d = parseInt(decimalarr[i], comput);
                    decimalsum += d * Math.pow(comput, len);


                }
                let sum = integersum + decimalsum;//整数部分+小数部分

                console.log(integerarr);
                console.log(decimalarr);
                console.log(sum);//得到对应的十进制
                console.log(sum.toString(2));
                document.querySelector('.famliy').innerHTML = sum.toString(result);








            }

            //整数算法
            else {
                const c = parseInt(number, comput);//将输入的数字按进制转换为10进制数
                const r = c.toString(result)//将转换好的10进制数转换为规定进制
                console.log(c, r);
                document.querySelector('.famliy').innerHTML = r;
            }
        })


    </script>
</body>

</html>
<!-- function convertToBinary() {
const inputNum = document.getElementById('inputNum').value;
const integerPart = Math.floor(inputNum).toString(2);
let decimalPart = '';
let decimalNum = inputNum - Math.floor(inputNum);
while (decimalNum !== 0) {
decimalNum *= 2;
decimalPart += Math.floor(decimalNum);
decimalNum -= Math.floor(decimalNum);
}
const binaryNum = decimalPart === '' ? integerPart : `${integerPart}.${decimalPart}`;
document.getElementById('result').innerText = `二进制数为：${binaryNum}`;
} -->